﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
{% load static %}
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>新建测试用例</title>
    <link href="{% static 'assets/css/bootstrap.css' %}" rel="stylesheet"/>
    <link href="{% static 'assets/css/font-awesome.css' %}" rel="stylesheet"/>
    <link href="{% static 'assets/js/morris/morris-0.4.3.min.css' %}" rel="stylesheet"/>
    <link href="{% static 'assets/css/custom-styles.css' %}" rel="stylesheet"/>

</head>

<body>
<div id="wrapper">
    <!-- 头部bar -->
    <nav class="navbar navbar-default top-navbar" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/admin/index">POM - 自动化测试平台
            </a>
        </div>

        <ul class="nav navbar-top-links navbar-right color-white">
            <li>
                <a href="/login/" class=" pointer">退出登录</a>
            </li>
            <li><span class="mar-rignt-100">{{user}}</span></li>
        </ul>
    </nav>
    <!-- 头部bar end -->
    <!-- 左侧导航  -->
    <nav class="navbar-default navbar-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav" id="main-menu">

                <li>
                    <a href="/admin/index"><i class="fa fa-dashboard"></i> 系统概括</a>
                </li>
                <li>
                    <a href="/admin/project"><i class="fa fa-desktop"></i> 项目管理</a>
                </li>
                <li>
                    <a href="/admin/page"><i class="fa fa-bar-chart-o"></i> 页面管理</a>
                </li>
                <li>
                    <a href="/admin/element"><i class="fa fa-qrcode"></i> 页面元素</a>
                </li>

                <li>
                    <a href="/admin/keyword"><i class="fa fa-table"></i> 关键字库</a>
                </li>
                <li>
                    <a class="active-menu" href="/admin/testcase"><i class="fa fa-edit"></i> 测试用例 </a>
                </li>
                <li>
                    <a href="/admin/result"><i class="fa fa-fw fa-file"></i> 测试结果 </a>
                </li>
                <li>
                    <a href="/admin/loginConfig"><i class="fa fa-fw fa-building-o"></i> 登录配置 </a>
                </li>
                <li>
                    <a href="/admin/task"><i class="fa fa-fw fa-sitemap"></i> 任务管理 </a>
                </li>
            </ul>
        </div>

    </nav>
    <!-- 左侧导航  -->
    <div id="page-wrapper">
        <div id="page-inner">
            <div class="row">
                <div class="col-md-12">
                    <h1 class="page-header">
                        <a href="/admin/testcase">测试用例</a> - 新建测试用例
                    </h1>
                </div>
            </div>
            <!--内容-->
            <!--内容-->
            <div class="row">
                <div class="col-md-12">
                    <!-- Advanced Tables -->
                    <div class="panel panel-default">
                        <!--<div class="panel-heading">表格名字</div>-->
                        <div class="panel-body width-p8" style="min-height:600px">
                            <form class="form-horizontal" role="form">
                                <div class="form-group">
                                    <label for="firstname" class="col-sm-2 control-label">用例标题</label>
                                    <div class="col-sm-10">
                                        <input id='title' type="text" class="form-control">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="lastname" class="col-sm-2 control-label">所属项目</label>
                                    <div class="col-sm-10">
                                        <select id='projectSelect' class="form-control">
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="lastname" class="col-sm-2 control-label">优先级</label>
                                    <div class="col-sm-10">
                                        <select id="level" class="form-control">
                                            <option value=1>低</option>
                                            <option value=2>中</option>
                                            <option value=3>高</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="lastname" class="col-sm-2 control-label">断言类型</label>
                                    <div class="col-sm-10">
                                        <div class="radio" style="display:inline-block; margin-right:20px">
                                            <label>
                                                <input type="radio" onClick="key_select(1)" name="checkType"
                                                       id="optionsRadios1" value="url" checked="">url
                                            </label>
                                        </div>
                                        <div class="radio" style="display:inline-block">
                                            <label>
                                                <input type="radio" onClick="key_select(2)" name="checkType"
                                                       id="optionsRadios2" value="element">元素
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <!--url -->
                                <div id="css-xitong">
                                    <div class="form-group">
                                        <label for="firstname" class="col-sm-2 control-label">断言值</label>
                                        <div class="col-sm-10">
                                            <input id='urlCheckValue' type="text" class="form-control">
                                        </div>
                                    </div>
                                </div>
                                <!--元素-->
                                <div id="css-zidingyi" style=" display:none">
                                    <div class="form-group">
                                        <label for="firstname" class="col-sm-2 control-label" style="display:inline-block; padding-top:12px;">断言值</label>
                                        <div class="col-sm-3" style="display:inline-block; padding-top:8px;">
                                            <select id="check-page" class="form-control">
                                            </select>
                                        </div>
                                        <div class="col-sm-3" style="display:inline-block; padding-top:8px;">
                                            <select id="check-element" class="form-control">
                                            </select>
                                        </div>
                                        <div class="col-sm-3" style="display:inline-block; padding-top:8px;">
                                            <input id='check-text' type="text" class="form-control">
                                        </div>
                                        <div class="radio" style="display:inline-block; padding-top:0px; padding-right:8px;">
                                            <label>
                                                <input type="radio"  name="selectText"
                                                       id="optionsRadios3" value="all" checked="">完全匹配
                                            </label>
                                        </div>
                                        <div class="radio" style="display:inline-block; padding-top:0px; padding-right:8px;">
                                            <label>
                                                <input type="radio"  name="selectText"
                                                       id="optionsRadios4" value="in">包含匹配
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="lastname" class="col-sm-2 control-label">前置登录</label>
                                    <div class="col-sm-10">
                                        <select id="logins" multiple class="form-control">
                                        </select>
                                        <br> 按住键盘ctrl + 点击鼠标左键可多选
                                    </div>
                                </div>

                                <!--步骤-->
                                <div id="">
                                    <div class="form-group">
                                        <label for="firstname" class="col-sm-2 control-label">步骤</label>
                                        <div class="col-sm-10">
                                            <div class="table-responsive">
                                                <a class="pointer" data-toggle="modal" onclick="gotoAddStep()">添加步骤</a>
                                                <table class="table table-striped table-bordered table-hover">
                                                    <thead>
                                                    <tr>
                                                        <th>序号</th>
                                                        <th>关键字</th>
                                                        <th>参数</th>
                                                        <th>操作</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody id="steps">
                                                    </tbody>
                                                </table>
                                            </div>

                                        </div>
                                    </div>
                                </div>

                                <!--end步骤-->
                                <!--测试数据-->
                                <div id="">
                                    <div class="form-group">
                                        <label for="firstname" class="col-sm-2 control-label">测试数据</label>
                                        <div class="col-sm-10">
                                            <div class="table-responsive">
                                                <a class="pointer" data-toggle="modal"
                                                   onclick="gotoAddTestData()">添加测试数据</a>
                                                <table id="parameterKey"
                                                       class="table table-striped table-bordered table-hover">
                                                    <thead>
                                                    <tr>
                                                        <th>序号</th>
                                                        <th>预期结果</th>
                                                        <th>操作</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody id="testData">
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                                <!--测试数据end-->

                                <div class="form-group">
                                    <label for="lastname" class="col-sm-2 control-label">备注信息</label>
                                    <div class="col-sm-10">
                                        <textarea id="remark" class="form-control" rows="3"></textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label"></label>
                                    <div id='message' class="col-sm-10 js_message text-danger"></div>
                                </div>
                                <div class="form-group">
                                    <label for="lastname" class="col-sm-2 control-label"></label>
                                    <div class="col-sm-10">
                                        <button type="button" class="btn btn-primary mar-rignt-20" 
                                                onclick="createTestCase()">保存
                                        </button>
                                        <button type="button" class="btn btn-default"
                                                onclick="javascript:window.location.href='/admin/testcase'">取消
                                        </button>
                                    </div>
                                </div>

                            </form>
                            <div id="params" style="display: none"></div>
                        </div>
                    </div>
                </div>
            </div>
            <!--内容-->

            <!--内容end-->
            <footer>
                <p class="text-center"></p>
            </footer>
        </div>
        <!-- /. PAGE INNER  -->
    </div>
    <!-- /. PAGE WRAPPER  -->
</div>
<!-- /. WRAPPER  -->

<!--======-弹窗1 添加测试数据-->
<div class="modal fade" id="addShuju" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel1">
                    添加（编辑）测试数据
                </h4>
            </div>
            <div class="modal-body">
                <!--内容-->
                <form id="textDataSet" class="form-horizontal" role="form">
                </form>
                <!--内容-->

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    取消
                </button>
                <button type="button" id="saveTestData" class="btn btn-primary">
                    保存
                </button>

            </div>
        </div>
    </div>
</div>
<!--======-end 添加测试数据-->

<!--======-弹窗2 添加步骤-->
<div class="modal fade" id="addBuzhou" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" onclick="cancelSaveStep()">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel2">
                    添加步骤
                </h4>
            </div>
            <div class="modal-body">
                <!--内容-->
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="lastname" class="col-sm-2 control-label">选择操作</label>
                        <div class="col-sm-10">
                            <select id="step-keyword" class="form-control">
                            </select>
                        </div>
                    </div>
                </form>

                <div class="table-responsive">
                    设置参数：<br>
                    <table class="table table-striped table-bordered table-hover">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>名称</th>
                            <th>参数类型</th>
                            <th>值</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="keyword-value">
                    </table>
                </div>

                <!--内容-->

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" onclick="cancelSaveStep()">
                    取消
                </button>
                <button type="button" id="saveStep" class="btn btn-primary">
                    保存
                </button>

            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal -->
</div>
<!--======-end 添加步骤-->

<div class="modal fade" id="setCanshu" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" onclick="cancelSaveParameter()">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel3">
                    设置参数值
                </h4>
            </div>
            <div class="modal-body">
                <!--内容-->
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="lastname" class="col-sm-2 control-label">值类型</label>
                        <div class="col-sm-10">
                            <div class="radio" style="display:inline-block; margin-right:20px">
                                <label>
                                    <input type="radio" name="valueType"
                                           id="optionsCanshu1" value="value" checked="">值
                                </label>
                            </div>
                            <div class="radio" style="display:inline-block">
                                <label>
                                    <input type="radio" name="valueType"
                                           id="optionsCanshu2" value="parameter">参数化
                                </label>
                            </div>
                        </div>
                    </div>
                    <!--==值===-->
                    <div id="css-canshu-zhi">
                        <!--文本-->
                        <div id='stringType' class="form-group">
                            <label for="firstname" class="col-sm-2 control-label">参数值</label>
                            <div class="col-sm-10">
                                <input id='stringValue' type="text" class="form-control">
                            </div>
                        </div>
                        <!--元素-->
                        <div id='elementType' class="form-group">
                            <label for="lastname" class="col-sm-2 control-label">参数值</label>
                            <div class="col-sm-5">
                                <select id="page" class="form-control">
                                </select>
                            </div>
                            <div class="col-sm-5">
                                <select id="elementValue" class="form-control">
                                </select>
                            </div>
                        </div>
                    </div>
                    <!--==end 值===-->
                    <!--参数化-->
                    <div id="css-canshu-hua" style="display:none">
                        <!--文本 元素-->
                        <div id="parameterType" class="form-group">
                            <label for="firstname" class="col-sm-2 control-label">名称</label>
                            <div class="col-sm-10">
                                <input id='parameterValue' type="text" class="form-control">
                            </div>
                        </div>
                    </div>

                </form>
                <!--内容-->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" onclick="cancelSaveParameter()">
                    取消
                </button>
                <button type="button" id="saveParameter" class="btn btn-primary">
                    保存
                </button>

            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal -->
</div>

<script src="{% static 'assets/js/jquery-1.10.2.js' %}"></script>
<script src="{% static 'assets/js/bootstrap.min.js' %}"></script>
<script src="{% static 'assets/js/jquery.metisMenu.js' %}"></script>
<script src="{% static 'assets/js/morris/raphael-2.1.0.min.js' %}"></script>
<script src="{% static 'assets/js/morris/morris.js' %}"></script>
<script src="{% static 'assets/js/dataTables/jquery.dataTables.js' %}"></script>
<script src="{% static 'assets/js/dataTables/dataTables.bootstrap.js' %}"></script>
<script src="{% static 'assets/js/custom-scripts.js' %}"></script>
<script src="{% static 'assets/datetimepicker/bootstrap-datetimepicker.min.js' %}"></script>
<script src="{% static 'assets/datetimepicker/bootstrap-datetimepicker.zh-CN.js' %}"></script>
<script src="{% static 'assets/datetimepicker/moment-with-locales(1).js' %}"></script>

<script>
    function createTestCase() {
        var title, level, projectId, checkType, checkValue, checkText, selectText, logins = [], steps = [], parameter = [], remark;
        title = $("#title").val();
        projectId = $("#projectSelect option:selected").val();
        level = $("#level option:selected").val();
        checkType = $('.radio input[name="checkType"]:checked ').val()
        if (checkType == "url") {
            checkValue = $("#urlCheckValue").val();
        } else {
            checkValue = $("#check-element option:selected").val();
            checkText = $("#check-text").val();
            selectText = $('.radio input[name="selectText"]:checked ').val()
        }
        logins = $("#logins option:selected").val()
        var stepList = $("#steps tr td.data");
        for (var i = 0; i < stepList.length; i++) {
            steps.push(JSON.parse($(stepList[i]).text().toString()))
        }
        var parameterList = $("#testData tr td.data");
        for (var i = 0; i < parameterList.length; i++) {
            parameter.push(JSON.parse($(parameterList[i]).text().toString()))
        }
        remark = $("#remark").val();
        var data = {
            "projectId": projectId,
            "level": level,
            "title": title,
            "remark": remark,
            "beforeLogin": logins,
            "steps": steps,
            "parameter": parameter,
            "checkType": checkType,
            "checkValue": checkValue,
            "checkText": checkText,
            "selectText": selectText,
        }
        $.ajax({
            url: '/api/v1/testcase/create',
            type: 'post',
            dataType: 'json',
            data: JSON.stringify(data),
            success: function (res) {
                if (res.code == 200) {
                    $("#message").html("添加成功,即将跳转到列表页");
                    setTimeout(function () {
                        window.location.href = '/admin/testcase';
                    }, 1000)
                } else {
                    $("#message").html(res.message);
                }
            }
        });
    }
</script>

<script>
    init();

    function gotoAddTestData() {
        $("#saveTestData").attr("onclick", "addTestData()");
        $("#myModalLabel1").html("添加测试数据");
        $("#textDataSet div").remove();
        $("#addShuju").modal("show");
        var ths = $("#parameterKey thead tr th.key");
        var divs = "";
        for (var i = 0; i < ths.length; i++) {
            var data = JSON.parse($(ths[i]).attr("data-type"));
            if (data["type"] == "string") {
                divs += addStringData(data["key"]);
            } else {
                divs += addElementData(data["key"]);
            }
        }
        divs += '<div class="form-group">';
        divs += '<label for="lastname" class="col-sm-2 control-label">预期结果</label>';
        divs += '<div class="col-sm-10">';
        divs += '<div class="radio" style="display:inline-block; margin-right:20px">';
        divs += '<label><input type="radio" name="expect"  value="true" checked="checked">成功</label>';
        divs += '</div>';
        divs += '<div class="radio" style="display:inline-block">';
        divs += '<label><input type="radio" name="expect"  value="false">失败</label>';
        divs += '</div></div></div>';
        $("#textDataSet").append(divs);
        $("select[name='pageSelect']").append($("#check-page option").clone());
        $("select[name='pageSelect']").val("0");
        $("select[name='elementSelect']").append($("#elementValue option").clone());
        $("select[name='pageSelect']").val("0");
        // changePage();
        $("select[name='pageSelect']").on('change', function () {
            var elementSelect = $(this).parent().parent().find("div select[name='elementSelect']");
            var pageId = $(this).find("option:selected").val();
            elementSelect.find("option").remove();
            elementSelect.append("<option value='0'>选择元素</option>");
            $.ajax({
                url: '/api/v1/element?p=1',
                type: 'post',
                dataType: 'json',
                data: JSON.stringify({"pageId": pageId, "pageSize": 9999999}),
                success: function (res) {
                    if (res.code == 200) {
                        for (var i = 0; i < res.data.elements.length; i++) {
                            elementSelect.append('<option value="' + res.data.elements[i].id + '">' + res.data.elements[i].name + '</option>');
                        }
                    }
                }
            });
        });
    }

    function addTestData(index) {
        var isAdd = (index == null)
        index = (index == null ? ($("#testData tr").length + 1) : index);
        var divs = $("#textDataSet").find("div[data-type]");
        var data = {}
        var tds = '<td class="center">' + index + '</td>';
        for (var i = 0; i < divs.length; i++) {
            var div = $(divs[i]);
            var type = div.attr("data-type");
            var value, expect;
            var key = div.attr("data-key");
            var viewValue, viewPageId;
            if (type == "string") {
                value = div.find("div input").val();
                viewValue = value;
                tds += '<td data-type="string" data-key="' + key + '" class="center">' + viewValue + '</td>';
                data[key] = value;
            } else {
                viewPageId = div.find("div select[name='pageSelect'] option:selected").val();
                value = div.find("div select[name='elementSelect'] option:selected").val();
                viewValue = div.find("div select[name='elementSelect'] option:selected").text();
                tds += '<td data-type="element" data-element = "' + value + '" data-page = "' + viewPageId + '" data-key="' + key + '" class="center">' + viewValue + '</td>';
                data[key] = value;
                data[key + 'name'] = viewValue;
            }
        }
        expect = ($('.radio input[name="expect"]:checked ').val()) == "true";
        data["expect"] = expect;
        tds += '<td data-type="expect" class="center">' + (expect ? "成功" : "失败") + '</td>';
        tds += '<td class="center">';
        tds += '<a class="pointer" data-index="' + index + '" onclick="setTestData(this)">编辑</a> -'
        tds += '<a class="pointer" data-toggle="modal" onclick="delTestData(this)">删除</a></td>'
        tds += '<td class="data" style="display: none">' + JSON.stringify(data) + '</td>';

        if (isAdd) {
            $("#testData").append("<tr>" + tds + "</tr>");
        } else {
            var tr = $("#testData tr td a[data-index='" + index + "']").parent().parent();
            tr.find("td").remove();
            tr.append(tds);
        }
        $("#addShuju").modal("hide");
    }

    function delTestData(obj) {
        $(obj).parent().parent().remove();
        var trs = $("#testData").find("tr");
        for (var i = 0; i < trs.length; i++) {
            var tr = $(trs[i]);
            var index = i + 1;
            tr.find("td:first").html(index);
            tr.find("td a[data-index]").attr("data-index", index);
        }
    }

    function setTestData(obj) {
        var index = $(obj).attr("data-index");
        $("#saveTestData").attr("onclick", "addTestData(" + index + ")");
        $("#myModalLabel1").html("编辑测试数据");
        $("#textDataSet div").remove();
        var ths = $("#parameterKey thead tr th.key");
        var divs = "";
        for (var i = 0; i < ths.length; i++) {
            var data = JSON.parse($(ths[i]).attr("data-type"));
            if (data["type"] == "string") {
                divs += addStringData(data["key"]);
            } else {
                divs += addElementData(data["key"]);
            }
        }
        divs += '<div class="form-group">';
        divs += '<label for="lastname" class="col-sm-2 control-label">预期结果</label>';
        divs += '<div class="col-sm-10">';
        divs += '<div class="radio" style="display:inline-block; margin-right:20px">';
        divs += '<label><input type="radio" name="expect"  value="true" checked="checked">成功</label>';
        divs += '</div>';
        divs += '<div class="radio" style="display:inline-block">';
        divs += '<label><input type="radio" name="expect"  value="false">失败</label>';
        divs += '</div></div></div>';
        $("#textDataSet").append(divs);
        $("select[name='pageSelect']").append($("#check-page option").clone());
        $("select[name='pageSelect']").val("0");
        // changePage();
        $("select[name='pageSelect']").on('change', function () {
            var elementSelect = $(this).parent().parent().find("div select[name='elementSelect']");
            var pageId = $(this).find("option:selected").val();
            elementSelect.find("option").remove();
            elementSelect.append("<option value='0'>选择元素</option>");
            $.ajax({
                url: '/api/v1/element?p=1',
                type: 'post',
                dataType: 'json',
                data: JSON.stringify({"pageId": pageId, "pageSize": 9999999}),
                success: function (res) {
                    if (res.code == 200) {
                        for (var i = 0; i < res.data.elements.length; i++) {
                            elementSelect.append('<option value="' + res.data.elements[i].id + '">' + res.data.elements[i].name + '</option>');
                        }
                    }
                }
            });
        });
        $("#addShuju").modal("show");
    }

    function addStringData(key) {
        var data = ''
        data += '<div data-type="string" data-key=' + key + '  class="form-group">';
        data += '<label for="firstname" class="col-sm-2 control-label">' + key + '</label>';
        data += '<div class="col-sm-10">';
        data += '<input type="text" class="form-control">';
        data += '</div></div>';
        return data
    }

    function addElementData(key) {
        var data = '<div data-type="element" data-key=' + key + '  class="form-group">'
        data += '<label for="lastname" class="col-sm-2 control-label">' + key + '</label>';
        data += ' <div class="col-sm-5"><select name="pageSelect" class="form-control"> </select></div>';
        data += '<div class="col-sm-5"><select  name="elementSelect" class="form-control"> </select></div>';
        data += '</div>';
        return data
    }

    function initParams() {
        $("#testData tr").remove();
        var tds = $("#steps tr td div.parameter");
        $("#parameterKey thead tr th").remove();
        $("#parameterKey thead tr").append("<th>序号</th>");
        for (var i = 0; i < tds.length; i++) {
            var data = JSON.parse(($(tds[i]).attr("data")));
            if (data["isParameter"]) {
                var tv = {"key": data["value"], "type": data["type"]};
                $("#parameterKey thead tr").append("<th class='key' data-type=" + JSON.stringify(tv) + ">" + data["value"] + "</th>");
            }
        }
        $("#parameterKey thead tr").append("<th>预期结果</th>");
        $("#parameterKey thead tr").append("<th>操作</th>");
    }

    function cancelSaveParameter() {
        $("#addBuzhou").modal("show");
        $("#setCanshu").modal("hide");
    }

    function key_select(k) {
        if (k == 2) {
            $("#css-xitong").hide();
            $("#css-zidingyi").show();
        } else {
            $("#css-xitong").show();
            $("#css-zidingyi").hide();
        }
    }

    function cancelSaveStep() {
        $("#addBuzhou").modal("hide");
        $("#addTestCaseMessage").modal("hide");
        $(".modal-backdrop.in").remove();
    }

    function canshu_select(k, type) {
        if (k == 2) {
            $("#css-canshu-zhi").hide();
            $("#css-canshu-hua").show();
        } else {
            $("#css-canshu-zhi").show();
            $("#css-canshu-hua").hide();
        }
        if (type == "string") {
            $("#elementType").hide();
            $("#stringType").show();
        } else {
            $("#stringType").hide();
            $("#elementType").show();
        }
    }

    function delStep(obj) {
        $(obj).parent().parent().remove();
        var trs = $("#steps").find("tr");
        for (var i = 0; i < trs.length; i++) {
            var tr = $(trs[i]);
            var index = i + 1;
            tr.find("td:first").html(index);
            tr.find("td a[data-index]").attr("data-index", index);
        }
        initParams()
    }

    function setStep(index) {
        index = $(index).attr("data-index");
        $("#saveStep").attr("onclick", "addStep(" + index + ")");
        $("#myModalLabel2").html("编辑步骤");
        var tr = $("#steps tr td a[data-index='" + index + "']").parent().parent();
        var keywordId = JSON.parse((tr.find("td.data").text()))["keywordId"];
        $("#step-keyword").val(keywordId);
        var divs = tr.find("td div.parameter");
        var tr = '';
        for (var i = 0; i < divs.length; i++) {
            var index = i + 1;
            var view = JSON.parse($(divs[i]).attr("data-view"));
            var type = view["type"];
            tr += '<tr class="even">';
            tr += '<td class="center">' + index + '</td>';
            tr += '<td class="center">' + view["key"] + '</td>';
            var type_ = type == "string" ? "文本" : type == "element" ? "元素" : "";
            tr += '<td  class="center">' + type_ + '</td>';
            if (type == "element") {
                tr += '<td class="center">' + (view["isParameter"] ? ('<em  style="color:red;font-style: normal;">参数化：</em>' + view["value"]) : view["elementName"]) + '</td>';
            } else {
                tr += '<td class="center">' + (view["isParameter"] ? ('<em  style="color:red;font-style: normal;">参数化：</em>' + view["value"]) : view["value"]) + '</td>';
            }
            tr += '<td class="center">';
            tr += '<a class="pointer" data-index="' + index + '" data-value=\'' + JSON.stringify(view) + '\'+ data-toggle="modal" onclick="setValue(this)">设置参数值</a>';
            tr += '</td>';
            tr += '<td class = "data" style="display:none">';
            tr += $(divs[i]).attr("data");
            tr += '</td>';
            tr += '</tr>';
        }
        $("#keyword-value").find("tr").remove();
        $("#keyword-value").append(tr);
        $("#addBuzhou").modal("show");
    }

    function setValue(obj) {
        $("#saveParameterMessage").html("");
        $("#stringValue").val("");
        $("#parameterValue").val("");
        $("#elementValue").val("0");
        $("#addBuzhou").modal("hide");
        $("#setCanshu").modal("show");
        var index = $(obj).attr("data-index");
        $("#saveParameter").attr("onclick", "settingParameter(" + index + ")");
        var data = JSON.parse($(obj).attr("data-value"));
        var type = data["type"];
        var value = data["value"];
        $("#optionsCanshu1").attr("onclick", "canshu_select(1,'" + type + "')");
        $("#optionsCanshu2").attr("onclick", "canshu_select(2,'" + type + "')");
        if (data["isParameter"]) {
            canshu_select(2, type);
            $("input:radio[value='value']").removeAttr('checked');
            $("input:radio[value='parameter']").prop('checked', true);
            $("#parameterValue").val(value);
        } else {
            canshu_select(1, type);
            $("input:radio[value='parameter']").removeAttr('checked');
            $("input:radio[value='value']").prop('checked', true);
            if (type == "string") {
                $("#elementType").hide();
                $("#stringValue").val(value);
                $("#stringType").show();
            } else if (type == "element") {
                $("#stringType").hide();
                $("#page").val(data["pageId"]);
                $("#elementValue").find("option").remove();
                $("#elementValue").append("<option value='0'>选择元素</option>");
                $.ajax({
                    url: '/api/v1/element?p=1',
                    type: 'post',
                    dataType: 'json',
                    data: JSON.stringify({"pageId": data["pageId"], "pageSize": 9999999}),
                    success: function (res) {
                        if (res.code == 200) {
                            for (var i = 0; i < res.data.elements.length; i++) {
                                if (("" + res.data.elements[i].id) == data["value"]) {
                                    $("#elementValue").append('<option selected="selected" value="' + res.data.elements[i].id + '">' + res.data.elements[i].name + '</option>');
                                } else {
                                    $("#elementValue").append('<option value="' + res.data.elements[i].id + '">' + res.data.elements[i].name + '</option>');
                                }
                            }
                        }
                    }
                });
                $("#elementType").show();
            }
        }
    }

    function settingParameter(index) {
        var isParameter = (($('.radio input[name="valueType"]:checked ').val()) == "parameter");
        var a = $("#keyword-value tr td a[data-index='" + index + "']");
        var data_value = JSON.parse(a.attr("data-value"));
        var type = data_value["type"];
        var key = data_value["key"];
        var value = '';
        var type_ = type == "string" ? "文本" : type == "element" ? "元素" : "";
        var data = {}, elementName, pageId;
        data["isParameter"] = isParameter;
        data["type"] = type
        data["key"] = key
        var value_ = '';
        var viewValue = '';
        if (isParameter) {
            value = $("#parameterType div input").val();
            data["value"] = value;
            value_ = '<em  style="color:red;font-style: normal;">参数化：</em>' + value;
            viewValue = data["value"];
        } else {
            if (type == "string") {
                data["value"] = $("#stringValue").val();
                value_ = data["value"];
                viewValue = value_;
            } else {
                pageId = $("#page option:selected").val();
                elementName = $("#elementValue option:selected").text();
                data["value"] = $("#elementValue option:selected").val();
                value_ = elementName;
                viewValue = data["value"]
            }
        }
        var view = jQuery.extend({}, data);
        view["value"] = viewValue;
        view["key"] = data_value["key"];
        view["type"] = type;
        view["isParameter"] = isParameter;
        view["elementName"] = elementName;
        view["pageId"] = pageId;
        var tds = '';
        tds += '<td class="center">' + index + '</td>';
        tds += '<td class="center">' + view["key"] + '</td>';
        tds += '<td  class="center">' + type_ + '</td>';
        tds += '<td class="center">' + value_ + '</td>';
        tds += '<td class="center">';
        tds += '<a class="pointer" data-index="' + index + '" data-value=\'' + JSON.stringify(view) + '\'+ data-toggle="modal" onclick="setValue(this)">设置参数值</a>';
        tds += '</td>';
        tds += '<td class = "data" style="display:none">';
        tds += JSON.stringify(data);
        tds += '</td>';
        var tr = a.parent().parent();
        tr.find("td").remove();
        tr.append(tds);
        $("#setCanshu").modal("hide");
        $("#addBuzhou").modal("show");
    }

    $("#projectSelect").on('change', function () {
        $("#step-keyword").find("option").remove();
        $("#logins").find("option").remove();
        $("#page,#check-page").find("option").remove();
        $("#check-element").find("option").remove();
        var projectId = $("#projectSelect option:selected").val();//所属项目
        $("#step-keyword").append("<option value='0'>选择关键字</option>");
        $("#page,#check-page").find("option").remove();
        $("#page,#check-page").append("<option value='0'>选择页面</option>");
        $("#elementValue").find("option").remove();
        $("#elementValue").append("<option value='0'>选择元素</option>");
        $.ajax({
            url: '/api/v1/element?p=1',
            type: 'post',
            dataType: 'json',
            data: JSON.stringify({"projectId": projectId, "pageSize": 9999999}),
            success: function (res) {
                if (res.code == 200) {
                    for (var i = 0; i < res.data.elements.length; i++) {
                        $("#elementValue").append('<option value="' + res.data.elements[i].id + '">' + res.data.elements[i].name + '</option>');
                    }
                }
            }
        });
        $.ajax({
            url: '/api/v1/keyword?p=1',
            type: 'post',
            dataType: 'json',
            data: JSON.stringify({"pageSize": 9999999}),
            success: function (res) {
                if (res.code == 200) {
                    for (var i = 0; i < res.data.keywords.length; i++) {
                        $("#step-keyword").append('<option value="' + res.data.keywords[i].id + '">' + res.data.keywords[i].name + '</option>');
                    }
                }
            }
        });
        $.ajax({
            url: '/api/v1/page?p=1',
            type: 'post',
            dataType: 'json',
            data: JSON.stringify({"projectId": projectId, "pageSize": 9999999}),
            success: function (res) {
                if (res.code == 200) {
                    if (projectId != 0)
                        for (var i = 0; i < res.data.pages.length; i++) {
                        $("#page,#check-page").append('<option value="' + res.data.pages[i].id + '">' + res.data.pages[i].name + '</option>');
                        }
                    else
                        $("#page,#check-page").find("option").remove();
                }
            }
        });
        $.ajax({
            url: '/api/v1/login?p=1',
            type: 'post',
            dataType: 'json',
            data: JSON.stringify({"projectId": projectId, "pageSize": 9999999}),
            success: function (res) {
                if (res.code == 200) {
                    for (var i = 0; i < res.data.logins.length; i++) {
                        $("#logins").append('<option value=' + res.data.logins[i].id + '>' + res.data.logins[i].name + '</option>');
                    }
                }
            }
        });
    });

    $("#page").on('change', function () {
        var projectId = $("#projectSelect option:selected").val();
        var pageId = $("#page option:selected").val();//所属项目
        $("#elementValue").find("option").remove();
        $("#elementValue").append("<option value='0'>选择元素</option>");
        $.ajax({
            url: '/api/v1/element?p=1',
            type: 'post',
            dataType: 'json',
            data: JSON.stringify({"projectId": projectId, "pageId": pageId, "pageSize": 9999999}),
            success: function (res) {
                if (res.code == 200) {
                    for (var i = 0; i < res.data.elements.length; i++) {
                        $("#elementValue").append('<option value="' + res.data.elements[i].id + '">' + res.data.elements[i].name + '</option>');
                    }
                }
            }
        });
    });

    $("#check-page").on('change', function () {
        var projectId = $("#projectSelect option:selected").val();
        var pageId = $("#check-page option:selected").val();//所属项目
        $("#check-element").find("option").remove();
        $("#check-element").append("<option value='0'>选择元素</option>");
        $.ajax({
            url: '/api/v1/element?p=1',
            type: 'post',
            dataType: 'json',
            data: JSON.stringify({"projectId": projectId, "pageId": pageId, "pageSize": 9999999}),
            success: function (res) {
                if (res.code == 200) {
                        if (pageId != 0)
                            for (var i = 0; i < res.data.elements.length; i++) {
                        $("#check-element").append('<option value="' + res.data.elements[i].id + '">' + res.data.elements[i].name + '</option>');
                        }
                        else
                            $("#check-element").find("option").remove();
                }
            }
        });
    });

    $("#step-keyword").on('change', function () {
        $("#keyword-value").find("tr").remove();
        var keywordId = $("#step-keyword option:selected").val();//所属项目
        $.ajax({
            url: '/api/v1/keyword/' + keywordId,
            type: 'post',
            dataType: 'json',
            success: function (res) {
                if (res.code == 200) {
                    var tr = '';
                    for (var i = 0; i < res.data.params.length; i++) {
                        var index = i + 1;
                        var type = res.data.params[i]["type"];
                        var type_ = type == "string" ? "文本" : type == "element" ? "元素" : "";
                        var data = res.data.params[i];
                        data["value"] = "";
                        var view = jQuery.extend({}, data);
                        view["type"] = type;
                        view["isParameter"] = false;
                        view["elementName"] = "";
                        view["pageId"] = "0";
                        tr += '<tr class="even">';
                        tr += '<td class="center">' + index + '</td>';
                        tr += '<td class="center">' + data["key"] + '</td>';
                        tr += '<td  class="center">' + type_ + '</td>';
                        tr += '<td class="center">' + data["value"] + '</td>';
                        tr += '<td class="center">';
                        tr += '<a class="pointer" data-index="' + index + '" data-value=\'' + JSON.stringify(view) + '\'+ data-toggle="modal" onclick="setValue(this)">设置参数值</a>';
                        tr += '</td>';
                        tr += '<td class = "data" style="display:none">';
                        tr += JSON.stringify(data);
                        tr += '</td>';
                        tr += '</tr>';
                    }
                    $("#keyword-value").append(tr);
                }
            }
        });
    });

    function addStep(index) {
        var keywordId = $("#step-keyword option:selected").val();
        var keywordName = $("#step-keyword option:selected").text();
        var listIndex;
        if (index == null) {
            listIndex = ($("#steps").find("tr").length) + 1;
        } else {
            listIndex = index;
        }
        var values = [];
        var trs = $("#keyword-value").find("tr");
        var tds = '';
        tds += '<td class="center">' + listIndex + '</td>';
        tds += '<td class="center">' + keywordName + '</td>';
        tds += '<td class="center">';
        var text = '';
        for (var i = 0; i < trs.length; i++) {
            var td = $(trs[i]).find("td.data");
            var data = JSON.parse(td.text());
            values.push(data);
            var viewData = $(trs[i]).find("td a").attr("data-value");
            viewData = JSON.parse(viewData);
            text += "<div class='parameter' data-view='" + JSON.stringify(viewData) + "' data='" + JSON.stringify(data) + "'>" + viewData["key"];
            text += " = ";
            if (viewData["isParameter"]) {
                text += ('<em  style="color:red;font-style: normal;">参数化：</em>' + viewData["value"]);
            } else {
                if (viewData["type"] == "string") {
                    text += viewData["value"];
                } else {
                    text += viewData["elementName"];
                }
            }
            text += "</div>"
        }
        var data = {"keywordId": keywordId, "values": values};
        tds += text;
        tds += '</td>';
        tds += '<td class="center">';
        tds += '<a class="pointer" data-index="' + listIndex + '" data-toggle="modal" onclick="setStep(this)">设置</a> -';
        tds += '<a class="pointer" data-toggle="modal" onclick="delStep(this)">删除</a>';
        tds += '</td>';
        tds += '<td class="data" data-view="" style="display: none">' + JSON.stringify(data) + '</td>';
        tds += '</tr>';
        var tr;
        if (index == null) {
            tr = '<tr class="odd">';
            tr += tds;
            tr += "</tr>"
            $("#steps").append(tr);
        } else {
            tr = $("#steps tr td a[data-index='" + index + "']").parent().parent();
            tr.find("td").remove();
            tr.append(tds);
        }
        $("#addCanshu").modal("hide");
        $("#addBuzhou").modal("hide");
        $(".modal-backdrop.in").remove();
        $(".modal-backdrop.fade.in").remove();
        initParams();
    }

    function gotoAddStep() {
        $("#myModalLabel2").html("添加步骤");
        $("#step-keyword").val("0");
        $("#keyword-value").find("tr").remove();
        $("#saveStep").attr("onclick", "addStep()");
        $("#addBuzhou").modal("show");
    }

    function init() {
        $("#message").html("");
        $("#steps").find("tr").remove();
        $("#testData").find("tr").remove();
        $("#projectSelect").find('option').remove();
        $("#projectSelect").append('<option value="0">选择项目</option>');
        var data = JSON.stringify({"pageSize": 99999});
        $.ajax({
            url: '/api/v1/project?p=1',
            type: 'post',
            dataType: 'json',
            data: data,
            success: function (res) {
                for (var i = 0; i < res.data.projects.length; i++) {
                    $("#projectSelect").append('<option value="' + res.data.projects[i].id + '">' + res.data.projects[i].name + '</option>');
                }
            }
        });
    }
</script>

</body>

</html>